<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$page_title}</title>

    <link rel="stylesheet" href="__ROOT__/tag/bootstrap.min.css"/>
    <link rel="stylesheet" href="__ROOT__/tag/bootstrap.theme.css"/>
    <script src="__ROOT__/tag/jquery-2.0.3.min.js" ></script>
    <script src="__ROOT__/tag/bootstrap.min.js" ></script>



    <style >
        .an{
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 1px;
            margin-right: 1px;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            /*border: 1px solid transparent;*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;

        }
        .an:hover, .an:focus {
            color: red;
            text-decoration: none;

        }


    </style>

</head>
<body>
<div class="table-responsive" style="overflow:scroll;height: 600px" id="main">

    <div style="text-align: center;margin-top: 5px;margin-bottom: 5px">
        <div class="btn-group" >
            <button class=" btn btn-success" id="ying">硬件</button>
            <button class=" btn btn-warning" id="ruan"> 软件</button>
            <button class="  btn btn-danger" id="fang"> 仿真</button>
            <button class=" btn btn-primary" id="ji">  机械及图纸类</button>
        </div>
    </div>

    <div class="btn-group ying" >
        <button class=" btn btn-success sub" att_id = "11,13,14">单片机</button>
        <button class=" btn btn-success sub" att_id = "15,19"> FPGA</button>
        <button class="  btn btn-success sub" att_id = "20,22"> 模拟电路 微电子 </button>
        <button class="  btn btn-success sub" att_id = "23,24,26"> 上位机 </button>
        <button class=" btn btn-success sub" att_id = "27,28,29"> PLC</button>
    </div>
    <div class="btn-group ruan" >
        <button class=" btn btn-warning sub"att_id = "31" >技术工种</button>
        <button class=" btn btn-warning sub" att_id = "32"> 编程语言</button>
        <button class="  btn btn-warning sub"att_id = "33"> 数据库 </button>
        <button class="  btn btn-warning sub"att_id = "35"> 操作系统开发环境 </button>
        <button class=" btn btn-warning sub"att_id = "37"> 关键字</button>
    </div>
    <div class="btn-group fang" >
        <button class=" btn btn-danger sub" att_id = "38"> 研究方向</button>
        <button class="  btn btn-danger sub"att_id = "39"> 仿真软件 </button>
        <button class="  btn btn-danger sub"att_id = "40"> 关键字 </button>
    </div>
    <div class="btn-group ji" >
        <button class=" btn btn-primary sub"att_id = "41" >网络工程</button>
        <button class=" btn btn-primary sub" att_id = "42"> 电气设计</button>
        <button class=" btn btn-primary sub" att_id = "43,44"> 机械模具土木类</button>
        <button class=" btn btn-primary sub" att_id = "45">其他类目 </button>
    </div>

    <hr>

    {foreach name="tagsname" item="vo" }
        <div   class=" {$vo.id} hi">
            <button  type="button" class="btn {$vo.color}"  > {$vo.tagname}</button>

            <div class="btn-group">
                {foreach name="vo['child']" item="v" }
                    <button class="an" id="{$v.id}" >{$v.name}</button>
                {/foreach}
            </div>
        </div>


    {/foreach}
    <div class="clearfix form-actions no-padding-left no-padding-right">
        <div class="form-group no-margin-bottom">
            <div class="col-sm-offset-2 col-sm-10">

                <button class="btn btn-success"id="tag" >确认添加</button><br>

            </div>
        </div>
    </div>

</div>



<block name="foot">

    <script type="text/javascript">
        $(".hi").hide();
        $(".ying").hide();
        $(".ruan").hide();
        $(".fang").hide();
        $(".ji").hide();
        //注意：parent 是 JS 自带的全局对象，可用于操作父页面
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        var ids =  parent.$('#tagid').val();
        var contents =  parent.$('#tags').val();


        var arr = ids.split(' ');
        for(var i in arr){

            $("#"+arr[i]).css("color","red");
        }

        var idListStr = ids+"";
        var tagcontent =contents+ "";

        $(".an").on("click", function(){

            var id = $(this).attr("id");

            if(idListStr.indexOf(id)>=0)
            {
                $("#"+id).css("color","black");

                idListStr =   idListStr.replace(id ,"");
                tagcontent =   tagcontent.replace($(this).text() ,"");

            }else {
                $("#"+id).css("color","red");
                idListStr =idListStr +' '+ id;
                tagcontent = tagcontent+' '+$(this).text();
            }

        });



        $("#tag").on("click", function(){

            parent.$('#tagid').val(idListStr);
            parent.$('#tags').val(tagcontent);
            parent.layer.close(index);
        });


        $(".sub").on("click", function(){
            $(".hi").hide();
            var id = $(this).attr("att_id");
            arr  = id.split(",");
            for(var i=0;i<arr.length;i++){

                $("."+arr[i]).show();

            }
        });

        $("#ying").on("click", function(){
            $(".ying").show();
            $(".ruan").hide();
            $(".fang").hide();
            $(".ji").hide();
            $(".hi").hide();
        });
        $("#ruan").on("click", function(){
            $(".ying").hide();
            $(".ruan").show();
            $(".fang").hide();
            $(".ji").hide();
            $(".hi").hide();
        });
        $("#fang").on("click", function(){
            $(".ying").hide();
            $(".ruan").hide();
            $(".fang").show();
            $(".ji").hide();
            $(".hi").hide();
        });
        $("#ji").on("click", function(){
            $(".ying").hide();
            $(".ruan").hide();
            $(".fang").hide();
            $(".ji").show();
            $(".hi").hide();
        });
    </script>



</block>
</body>
</html>